@import '@/style/element-var.scss';
@import '@/style/common.scss';
@import '@/style/global.scss';

.overview-view-page {
  padding: 20px 40px;

  .headline {
    font-size: $--font-size-large;
    font-weight: bold;
  }

  .statistics {
    padding-top: 20px;

    .col-wrapper {
      
      &:nth-child(1) .box {
        background: linear-gradient(90deg, #6A65FF, #409EFF);
      }

      &:nth-child(2) .box {
        background: linear-gradient(90deg, #409EFF, #65E5FF);
      }

      &:nth-child(3) .box {
        background: linear-gradient(90deg, #CF87FF, #7865FF);
      }
    }

    .box {
      height: 180px;
      padding: 0 80px 0 40px;
      border-radius: 10px;
      @include flex-box;
      color: #fff;
      transition: all .2s linear;

      &:hover {
        box-shadow: 0 15px 30px rgba(0, 0, 0, .2);
        transform: translate3d(0,-4px,0);
      }

      .left {
        @include flex-fill;

        .title {
          font-size: $--font-size-medium;
          margin-bottom: 10px;
        }

        .number {
          font-size: 36px;
          font-weight: bold;
          margin-bottom: 10px;
        }
      }

      .icon {
        opacity: .6;

        .iconfont {
          font-size: 40px;
        }
      }
    }
  }

  .charts-wrapper {
    padding-top: 20px;

    .charts-box {
      height: 450px;
      display: flex;
      flex-direction: column;
      margin-bottom: 20px;
      border-radius: 10px;
      background-color: #fff;

      .title {
        padding: 30px 30px 0;
        font-size: $--font-size-medium;
        font-weight: bold;
      }

      .charts-content {
        @include flex-fill;
        padding: 0 30px 20px;

        .charts-example {
          @extend .block-fill;
        }
      }
    }
  }
}
